import React from 'react'
// 引入图片 css样式
import wxqq from '../../../static/img/LoginReg/wxqq.png';
import yzm from '../../../static/img/LoginReg/yzm.png';
import './index.css'
import {aUrl} from '../../../static/axios_url'
import { Form, Input, Button, Checkbox, message } from 'antd';
import { Link,useNavigate } from 'react-router-dom';
import axios from 'axios';
export default function AccPass() {
    const navigate = useNavigate()
    const onFinish = (values) => {
        // console.log(values.username);
        axios.post(aUrl+'/users/login', {
            u_user:values.username,
            u_pass:values.password,
        }).then((res) => {
            console.log(res);
            if(res.data.code==1){
                message.success('登录成功')
                sessionStorage.setItem("user_id", res.data.u_id);
                sessionStorage.setItem("username", res.data.username);
                navigate('/')
            }else if(res.data.code==2){
                message.error('账号或密码不匹配')
            }else {
                message.error('用户不存在')
            }
        })
    };
    const onFinishFailed = (errorInfo) => {

        // console.log('Failed:', errorInfo);
    };


    return (
        <div className='acc-login'>
            <ul>
                <li className='acc-1'><span>登录</span>
                <Link to='phonelogin'><span>手机验证登录<i className="fa fa-building-o"></i></span></Link></li>

                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 24,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    {/* 用户输入框 */}
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '用户名不能为空，请输入',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input style={{ height: 42 }} placeholder="请输入用户名" />
                    </Form.Item>
                    {/* 密码框 */}
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '密码不能为空，请输入',
                            },
                        ]}
                    >
                        <Input.Password style={{ height: 42 }} placeholder="密码" />
                    </Form.Item>
                    {/* 验证码栏 */}
                    <Form.Item
                        name="accyzm"

                    >
                        <Input style={{ height: '42px', width: '111px' }} placeholder="验证码" />
                    </Form.Item>
                    <div className='acc-img'>
                        <img src={yzm} alt="" />
                        <span>看不清换一张</span>
                    </div>
                    {/* 自动登录忘记密码 */}
                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <div className='acc-dl'>
                            <Checkbox>自动登录</Checkbox>
                            <Link to='forgetpass'>忘记密码？</Link>
                        </div>
                    </Form.Item>
                    {/* 登录注册 */}
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button style={{
                            height: '45px', width: '133px', backgroundColor: '#f08200', borderRadius: '6px',
                            border: 'none',
                            marginLeft: '-102px'
                        }}
                            type="primary" htmlType="submit">
                            登录
                        </Button>
                        <Link to='register'>
                        <button
                            style={{
                                height: '45px', width: '133px', backgroundColor: '#498e3d', borderRadius: '6px',
                                border: 'none',
                                marginLeft: '40px',
                                color: 'white'
                            }} >会员注册</button></Link>
                    </Form.Item>
                </Form>
                <li className='acc-ts'>提示 : 未注册用户将直接注册为礼拜五用户</li>
                <li className='acc-xx'>-------------------<span>用合作网站登录</span>-----------------</li>
                <li className='acc-wxqq'><img src={wxqq} alt="" /></li>
            </ul>
        </div>
    )
}
